<template>
  <el-dialog
    title="下发考试"
    :visible="dialogVisible"
    @close="handleClose()"
    width="60%"
  >
    <div style="display: flex; flex-direction: column">
      <div>
        <el-form :model="form">
          <el-form-item label="卷名" :label-width="formLabelWidth">
            <el-input
              v-model="form.examinationPlanName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="考试时长(分钟)" label-width="120">
            <el-input-number v-model="form.testDuration"  :min="1" :max="120" label="请输入考试时长"></el-input-number>
          </el-form-item>
          <el-form-item label="考试时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.examinationTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <div>
          <el-tree
            :data="deptTree"
            show-checkbox
            :check-strictly="true"
            node-key="id"
            :props="{ label: 'label' }"
            @check-change="handleClick"
            ref="tree"
          >
          </el-tree>
        </div>
        <div style="display: flex">
          <div style="width: 50%">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 20px"
              height="350"
              border
            >
              <el-table-column prop="nickName" label="待选人员">
              </el-table-column>
              <el-table-column prop="dept.deptName" label="部门">
              </el-table-column>
              <el-table-column label="操作" align="center" width="100px">
                <template slot-scope="scope">
                  <el-button
                    @click="addUser(scope.row)"
                    type="text"
                    size="small"
                    :disabled="isUserAdded(scope.row)"
                  >
                    {{ isUserAdded(scope.row) ? "已添加" : "添加" }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchParams.pageNum"
              :limit.sync="searchParams.pageSize"
              @pagination="queryUserAll"
            />
          </div>

          <div style="width: 50%">
            <el-table
              ref="multipleTable"
              :data="selectedTableData"
              tooltip-effect="dark"
              height="350"
              style="width: 100%; margin-top: 20px; height: 100%"
              border
            >
              <el-table-column prop="nickName" label="已选人员">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="
                      deleteRow(scope.$index, selectedTableData)
                    "
                    type="text"
                    size="small"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import { addExaminationPlan } from "@/api/train/index";
import { listUser } from "@/api/system/user";
export default {
  data() {
    return {
      total: 0,
      // 部门树选项
      deptTree: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      input3: "",
      dialogVisible: false,
      formLabelWidth: "100px",
      form: {
        examinationPlanName: "",
        studentIds: "",
        studentName: 0,
        planId: 0,
        examinationTime:new Date(), // 设置默认时间为当前时间
        testDuration:30
      },
      studentIdsArray: [],
      tableData: [],
      selectedTableData: [],
      multipleSelection: [],
      searchParams: {
        pageNum: 1, //默认第一页
        pageSize: 10, //一页展示10条
        deptId: undefined,
        nikeName: "",
      },
      //记录勾选的人员id
      newArr: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  created() {
    this.queryDept();
  },
  methods: {
    //添加课件
    addUser(row) {
      let flag = this.selectedTableData.some(
        (item) => item.userId == row.userId
      );
      if (!flag) {
        this.selectedTableData.push(row);
      }
    },
    isUserAdded(row) {
      return this.selectedTableData.some((item) => item.userId === row.userId);
    },
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.searchParams.pageNum = val;
      //刷新表格
      this.queryUserAll();
    },
    /** 查询部门下拉树结构 */
    queryDept() {
      deptTreeSelect().then((response) => {
        this.deptTree = response.data;
      });
    },
    //部门人员
    queryUserAll(params) {
      params.isStudent = 2;
      listUser(params).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },

    //显示弹窗
    show(row) {
      this.dialogVisible = true;
      this.form.planId = row.planId;
      this.form.examinationPlanName = row.planName;
      this.queryUserAll(this.searchParams);
    },
    //提交表单
    submitForm() {
      this.getPostParams();
      if (!this.checkParams()) return;
      addExaminationPlan(JSON.stringify(this.form)).then((res) => {
        if (res.code === 200) {
          this.handleClose();
        }
      });
    },

    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      //清空表单
      this.newArr = [];
      this.form.waitUserNum = 0;
      this.tableData = [];
      this.form.paperName = "";
      this.$refs.tree.setCheckedKeys([]);
      this.selectedTableData = [];
      this.form.studentIds = [];
      this.studentIdsArray = [];
    },
    //部门节点点击事件
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id]);
        //根据部门id刷新人员列表
        this.searchParams.deptId = data.id;
        this.queryUserAll(this.searchParams);
      }
    },
    //移除已选人员
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },

    checkParams() {
      if (this.form.studentIds == "") {
        this.$modal.msgError("请选择人员");
        return false;
      }
      if (this.form.examinationPlanName == "") {
        this.$modal.msgError("请填写卷名");
        return false;
      }
      if (this.form.examinationTime == "") {
        this.$modal.msgError("请填写考试时间");
        return false;
      }
      return true;
    },
    //获取提交的用户id
    getPostParams() {
      for (let item of this.selectedTableData) {
        this.studentIdsArray.push(item.userId);
        console.log(this.studentIdsArray);
      }
      this.form.studentIds = this.studentIdsArray.join(",");
    },
  },
};
</script>
<style scoped>
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

/* 设置滚动条的宽度 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条的背景色和圆角 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 8px;
}
</style>
